<template>
  <div>
    <div>
      <form action="/">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          show-action
          @search="onSearch"
          background="#f0f3f6"
        />
      </form>
    </div>
   
    <slides :slides="sli"></slides>
    <div class="category">
      <div v-for="(item, index) in category" :key="index">
        <img :src="item.image" alt="">
        <p>{{item.name}}</p>
      </div>
    </div>
    <div class="recommend">
      <h3>商品推荐{{num}}</h3>
      <!-- <swiper :options="swiperOption">
        <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
          <img :src="slide.goodImage" alt="">
          <p>{{slide.goodName}}</p>
          <p>{{slide.goodPrice}}</p>
        </swiper-slide>
      </swiper> -->
    </div>
    <!-- floot -->
    <div class="floor-1">
      <div class="floor-left">
        <div v-for="(item, index) in floor" :key="index">
          <img src="" alt="">
        </div>
      </div>
      <div class="floor-right">
        <div>
          <img :src="floor[1]" alt="">
        </div>
        <div>
          <img :src="floor[2]" alt="">
        </div>
      </div>
    </div>
    <tab-bar :active="0"></tab-bar>
  </div>
</template>

<script>
import tabBar from '../base/tabBar.vue'
import {getSlidesData} from '../../api'
import slides from '../base/slides.vue'
// 导入样式和组件
import 'swiper/dist/css/swiper.css'
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'

export default {
  name: 'Home',
  data(){
    return {
      num:11.2,
      sli:[
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7ca38424c1092feef2c972418092c19.jpg?thumb=1&w=720&h=360',
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b40e1e2b2991d14bfbcaae061817cccb.jpg?thumb=1&w=720&h=360'
      ],
      value:'酸奶',
      category: [
        {
          image: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7ca38424c1092feef2c972418092c19.jpg?thumb=1&w=720&h=360",
          name: 'aaa'
        },
         {
          image: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b40e1e2b2991d14bfbcaae061817cccb.jpg?thumb=1&w=720&h=360",
          name: 'bbb'
        },
        {
          image: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7ca38424c1092feef2c972418092c19.jpg?thumb=1&w=720&h=360",
          name: 'aaa'
        },
         {
          image: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b40e1e2b2991d14bfbcaae061817cccb.jpg?thumb=1&w=720&h=360",
          name: 'bbb'
        }
      ],
      swiperSlides:[
        {
          goodName:'aaa',
          goodPrice: '12',
          goodImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7ca38424c1092feef2c972418092c19.jpg?thumb=1&w=720&h=360'
        },
        {
          goodName:'bbb',
          goodPrice: '20',
          goodImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b40e1e2b2991d14bfbcaae061817cccb.jpg?thumb=1&w=720&h=360'
        }
      ],
      floor: []
    }
  },
  // async created(){
    // getSlidesData().then(res => {
    //   console.log(res)
    // }).catch(err => {
    //   console.log(err)
    // })
    // let data = await getSlidesData()
    // this.slides = data.slides
  // },
  async created(){
    // let data = await getSlidesData()
  },
  components: {
    tabBar,
    slides,
    Swiper,
    SwiperSlide
  },
  methods:{
    onSearch(){
      console.log('search')
    },
    onCancel(){
      console.log('cancel')
    }
  },
  mounted(){
    
    // document.body.addEventListener('click', function(e){
    //   console.log('1')
    // }, false)

    // document.getElementById('parent').addEventListener("click", function(){
    //   console.log('2')
    // }, true)
    
    // document.getElementById('parent').addEventListener("click",function(){
    //   console.log('3')
    // }, false)
    
    // document.getElementById('child').addEventListener("click",function(){
    //   console.log('4')
    // }, false)
  }
}
</script>

<style lang="less">
  .category{
    display:flex;
    flex-direction: row;
    flex-wrap:nowrap;
    margin-top:.2rem;
    div{
      width:20%;
      margin:0 10px;
      img{
        width:100%;
      }
      p{
        font-size:16px;
      }
    }
  }
</style>